<template>
    <div class="con">
        <div class="con-content" v-for="(item,index) in bargainingList" :key="index"
            v-show="item.id>99756&&item.id<=99764" @click="onClick(item)">
            <div class="con-content-img">
                <img :src="item.pic" alt="">
            </div>
            <p class="con-content-p1">{{item.name}}</p>
            <p class="con-content-p2">{{item.characteristic}}</p>
            <p class="con-content-p3">￥{{item.minPrice}}</p>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    export default {
        computed: {
            ...mapState({
                bargainingList: state => state.homeSwiper.bargainingList
            })
        },
        methods: {
            onClick(item) {
                this.$router.push({
                    path: '/recommend-shopping-xiang',
                    query: {
                        item: item
                        
                    }
                })
            }
        }
    }
</script>

<style lang='scss' scoped>
    .con {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        .con-content {
            width: 48%;

            .con-content-img {
                width: 100%;
                height: 4rem;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .con-content-p1 {
                font-size: 0.25rem;
            }

            .con-content-p2 {
                font-size: 0.23rem;
                color: gray;
            }

            .con-content-p3 {
                font-size: 0.23rem;
                color: red;
            }
        }
    }
</style>